@import "../variables";
@import "../function";

html {
    font-size: 62.5%; /* 10÷16=62.5% */
}
#doc {
	width: 100%;
	margin: 0 auto;
}
@media only screen and (max-width: 180px){
    html {
        font-size: 31.25%!important; /* 5÷16=31.25% */
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 94%!important; /* 15.04÷16=94% */
    }
}
@media only screen and (min-width: 561px){
    html {
        font-size: 109%!important; /* 17.44÷16=109% */
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 125%!important; /* 20÷16=125% */
    }
	#doc {
		width: 640px;
	}
}
#doc {
	position: relative;
}

#doc-center {
	position: absolute;
	top: 20%;
	left: pxTorem(16px);
	right: pxTorem(16px);
	color: #8b5f23;
	.doc-center-title {
		font-weight: bold;
		font-size: pxTorem(40px);
	}
	.doc-center-desc {
		font-size: pxTorem(22px);
		margin-top: pxTorem(36px);
		margin-bottom: pxTorem(36px);
	}
	.doc-center-qrcode {
		width: pxTorem(200px);
		height: pxTorem(200px);
		margin: 0 auto;
		padding: 4px;
		background: #ffffff;
		canvas {
			display: none;
		}
	}
	.doc-center-footer {
		margin-top: pxTorem(28px);
		font-size: pxTorem(20px);
	}
}

@media only screen and (max-width: 180px){
#doc-center {
	top: 6%;
	.doc-center-desc {
		max-height: 120px;
		overflow: hidden;
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
	}
	.doc-center-qrcode {
		width: 80px;
		height: 80px;
		padding: 2px;
	}
	.doc-center-footer {
		margin-top: 0.3rem;
	}
}
}
#doc-content {
	width: 100%;
}
.logo-Content{
    position: relative;
}
#touchLogoContent{
    border-radius: 8px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -17%;
    margin-top: -17%;
    width: 34%;
    heigth: 34%;
}